import { defineComponent } from "vue";

export default defineComponent({
    data() {
        return {
            list: ["guoxudong", "guoqianhui"],
        };
    },
    render() {
        return (
            <div>
                <div style={{ fontSize: "16px", backgroundColor: 'grey' }}>
                    header:
                    {this.$slots.header?.call(undefined)}
                </div>
                <div>
                    content:
                    {this.list.map((item, index) => (
                        <div>{this.$slots.default?.call(undefined, {
                            scopUser: item,
                            scopIndex: index
                        }
                        )}</div>
                    ))}
                </div>
                <div style={{ color: 'grey' }}>
                    footer:
                    {this.$slots.footer?.call(undefined)}
                </div>
            </div>
        );
    }
});
